//计时器
let timer = null
//辅助计时器，用于控制BPM
let counter = 0 
//存储六种音效的名称
const effectNames = ['Hi hat','Ride cymbal','Tom tom','Floor tom','Snare drum','Bass drum']


Vue.createApp({
    //数据
    data(){
        return{
            //每分钟节拍数
            bpm:60,
            //当前播放的节拍索引
            curBeat:-1,
            //存储音效的数组
            sounds:[/*{
               title:'Hi-hat(foot)',
                bit:[1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0]
            },{
                title:'Tom-tom',
                bit:[1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0]
            }*/
        
            ]
        }
    },
    // mounted() 是一个生命周期钩子函数，
    // 它会在 Vue 实例完成DOM 挂载后立即执行。
    mounted(){
        this.init()
    },
    methods:{
        //定义初始值，用来构建刚才清空的sounds值
        init(){
            effectNames.forEach(title =>{
                //创建HTML5 Audio元素
                const player =document.createElement('audio')
                //设置音频文件路劲
                player.setAttribute('src',`asset/${title.replace(' ','_').toLowerCase()}.mp3`)
                
                //为每个音效创建对象：标题，播放器，16为序列
                const effect={
                    title,
                    player,
                    //对于bit数组先创建[16]的数组，全部填充为0
                    bit:new Array(16).fill(0)
                }
                //把这些内容封装为一个对像
                this.sounds.push(effect)
            })
        },
        //切换节拍状态
        toggleEffect(effect,i){
            //取反：取反当前节拍状态（0→1 或 1→0）
            effect.bit[i] = !effect.bit[i]

        },
        //播放当前节拍
        beat(){
            //更新当前节拍索引
            this.curBeat++
            if(this.curBeat>15) this.curBeat = 0
            //遍历所有音效
            this.sounds.forEach(effect=>{
                const{player,bit} = effect
                //如果小方块被选中，则调用player,并播放音频
                //即当前节拍位置为1
                if(bit[this.curBeat]){
                    //每次要播放时，重置播放
                    player.currentTime = 0
                    //调用play
                    player.play()
                }
            })

        },
        start(){
          
            if(!timer){
                counter = 0
                timer = setInterval(()=>{
                    counter++
                    //根据BPM计算触发间隔
                    if(counter < 60 / this.bpm*100/4) return;
                    counter = 0
                    //触发节拍播放
                    this.beat()
                },10)//每10ms检查一次
            }

        },
        //暂停
        pause(){
            //清除计时器，停止节拍触发
            clearInterval(timer)
            timer = null
        },
        clear(){
            //清除所有状态
            clearInterval(timer)
            timer = null
            //重置，把状态置为0
            this.sounds.forEach(effect => effect.bit.fill(0))
            //节拍重置为-1
            this.curBeat = -1

        }
    }

}).mount('#app')